<template>
    <div style="margin: 0 50px">
        <!--搜索-->
        <el-row>
            <el-col :span="24">
                <div class="search">
                    <el-form :inline="true" :model="searchData" @keydown.enter.native="onSearch">
                        <el-form-item class="text" label="权限名称">
                            <el-input
                                    placeholder="请输入权限名称"
                                    v-model="searchData.permissionDesc"
                                    size="small"
                                    clearable>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" size="mini" type="primary" @click="onSearch">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <!--工具栏-->
        <el-row>
            <el-col :span="24">
                <div class="tools">
                    <el-button @click="handleAdd" size="mini" icon="el-icon-plus" type="primary">新增</el-button>
                    <el-button :disabled="editBtnDisable" size="mini" icon="el-icon-edit"
                               @click="handleEdit(null,{id:selected[0]})"
                               type="success">修改
                    </el-button>
                    <el-button v-if="false" :disabled="deleteBtnDisable" size="mini" icon="el-icon-delete"
                               @click="handleDeleteByIds(selected)"
                               type="danger">删除
                    </el-button>
                    <el-button :loading="exportBtnLoading" :disabled="exportBtnDisable" size="mini"
                               icon="el-icon-download" type="warning" @click="exportXls">导出
                    </el-button>
                    <el-button :disabled="false" size="mini" icon="el-icon-refresh" @click="refresh">刷新
                    </el-button>
                </div>
            </el-col>
        </el-row>
        <!--表格-->
        <el-row>
            <el-col :span="24">
                <div style="width: auto;">
                    <el-table
                            :data="tableData"
                            row-key="id"
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                            @selection-change="selectionChange"
                            stripe
                            border
                            style="width: 100%;">
                        <el-table-column
                                type="selection"
                                align="center"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                label="编号"
                                align="center"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="permissionDesc"
                                align="left"
                                label="权限名称">
                        </el-table-column>
                        <el-table-column
                                align="left"
                                label="权限符号">
                            <template slot-scope="scope">
                                <el-tag type="success">{{scope.row.permissionKeyword}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="url"
                                align="left"
                                label="权限URL">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="text"
                                        icon="el-icon-edit"
                                        @click="handleEdit(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="text"
                                        icon="el-icon-delete"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 15px;text-align: right;">
                        <el-pagination
                                background
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10,20,50,100, 200, 300, 400]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-dialog
                :close-on-click-modal="false"
                title="新增"
                width="40%"
                :visible.sync="addDialogVisible">
            <el-form :inline="true" :model="addPermission"
                     label-position="right"
                     align="center"
                     label-width="90px">
                <el-form-item class="text" label="权限名称">
                    <el-input
                            placeholder="请输入权限名称"
                            v-model="addPermission.permissionDesc"
                            size="small"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item class="text" label="权限字符">
                    <el-input
                            placeholder="请输入权限字符"
                            v-model="addPermission.permissionKeyword"
                            size="small"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item class="text" label="权限RUL">
                    <el-input
                            placeholder="请输入权限RUL"
                            v-model="addPermission.url"
                            size="small"
                            clearable>
                    </el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleAddPermission">确 定</el-button>
  </span>
        </el-dialog>


        <el-dialog
                :close-on-click-modal="false"
                title="编辑"
                width="40%"
                :visible.sync="editDialogVisible"
        >
            <el-form :inline="true" :model="editPermission"
                     label-position="right"
                     align="center"
                     label-width="90px">
                <el-form-item class="text" label="权限名称">
                    <el-input
                            placeholder="请输入权限名称"
                            v-model="editPermission.permissionDesc"
                            size="small"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item class="text" label="权限字符">
                    <el-input
                            placeholder="请输入权限字符"
                            v-model="editPermission.permissionKeyword"
                            size="small"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item class="text" label="权限RUL">
                    <el-input
                            placeholder="请输入权限RUL"
                            v-model="editPermission.url"
                            size="small"
                            clearable>
                    </el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleEditPermission">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import {onlyFormat} from "../../../../utils/date";
    import fileDownload from 'js-file-download';
    import {
        addPermission,
        deletePermission,
        exportPermission,
        getPermissionById,
        permissionList,
        updatePermission
    } from "../../../../api/permission";

    export default {
        name: "Permission",
        data() {
            return {
                searchData: {
                    permissionDesc: ""
                },
                tableData: [],
                addPermission: {
                    url: "",
                    permissionKeyword: "",
                    permissionDesc: ""
                },
                editPermission: {},
                total: 10,//总页数
                currentPage: 1,//当前页面
                pageSize: 10,//每页大小
                addDialogVisible: false,//显示添加模态框
                editDialogVisible: false,//显示修改模态框
                editBtnDisable: true,
                deleteBtnDisable: true,
                exportBtnDisable: true,
                exportBtnLoading: false,
                selected: [],
            }
        },
        mounted() {
            this.getPermissionList()

        },
        methods: {
            //搜索
            async onSearch() {
                if (this.searchData.permissionDesc.length === 0) {
                    return false;
                }
                this.getPermissionList()
            },
            //搜索重置
            onReset() {
                this.searchData.permissionDesc = "";
                this.getPermissionList()
            },
            //添加按钮
            handleAdd() {
                Object.keys(this.addPermission).forEach(key => {
                    this.addPermission[key] = ""
                })
                this.addDialogVisible = true;
            },
            //刷新按钮
            refresh() {
                this.getPermissionList()
            },
            //编辑按钮
            async handleEdit(index, row) {
                let resp = await getPermissionById(row.id)
                this.editPermission = resp.data
                this.editDialogVisible = true
            },
            //提交编辑
            async handleEditPermission() {
                let resp = await updatePermission(this.editPermission)
                if (resp.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.getPermissionList()
                } else {
                    this.$message({
                        type: 'error',
                        message: '修改失败：' + resp.message
                    });
                }
                this.editDialogVisible = false
            },
            //删除按钮
            handleDelete(index, row) {
                this.$confirm('是否确认删除权限编号为"' + row.id + '"的数据项??', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let resp = await deletePermission(row.id);
                    if (resp.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.refresh();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败！' + resp.message
                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleDeleteByIds() {
                this.$confirm('是否确认删除权限编号为"' + this.selected + '"的数据项??', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let resp = {code: 200}
                    if (resp.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.refresh();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败：' + resp.message
                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //获取列表
            async getPermissionList() {
                let resp = await permissionList(
                    this.searchData.permissionDesc,
                    this.currentPage,
                    this.pageSize);
                this.total = resp.data.total;
                this.tableData = resp.data.list;
            },
            //页数改变
            handleSizeChange(val) {
                this.pageSize = val
                this.refresh();

            },
            //翻页
            handleCurrentChange(val) {
                this.currentPage = val
                this.refresh();
            },

            async handleAddPermission() {
                let resp = await addPermission(this.addPermission)
                if (resp.code === 200) {
                    this.$message.success('添加成功')
                    this.refresh();
                    this.addDialogVisible = false
                } else {
                    this.$message.error("添加失败：" + resp['message'])
                }
            },
            selectionChange(selection) {
                if (selection.length === 0) {
                    this.editBtnDisable = true;
                    this.deleteBtnDisable = true;
                    this.exportBtnDisable = true;
                    this.selected.length = 0
                }

                if (selection.length > 0) {
                    this.deleteBtnDisable = false;
                    this.exportBtnDisable = false;
                    this.editBtnDisable = true;

                    this.selected.length = 0;
                    selection.forEach(item => {
                        this.selected.push(item.id)
                    })
                }
                if (selection.length === 1) {
                    this.editBtnDisable = false;
                }
            },
            async exportXls() {
                let data = await exportPermission(this.selected);
                fileDownload(data, "权限信息表.xlsx");
            },
            //解析时间
            parseDate(time) {
                return onlyFormat(time);
            },
        }
    }
</script>
<!--公共样式-->
<style scoped lang="scss">

</style>